﻿@{
    ViewBag.Title = "Index";
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="@Url.Content("~/Static/css/vipuser.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Static/Js/jquery-1.7.1.min.js")"></script>
</head>
<body>
    <!--特权-->
    <div class="privilege" id="privilege">
        <h3>
            <img src="@Url.Content("~/Static/Image/privilege_top.png")"></h3>
        <ul id="scollBox">
            <li class="zixun" id="zixun">
                <p>
                    <img src="@Url.Content("~/Static/Image/zx_bg.png")">
                </p>
                <p class="zixun_p" id="p1">
                    <img src="@Url.Content("~/Static/Image/zx_img.png")">
                </p>
            </li>
            <li class="jiepan">
                <p>
                    <img src="@Url.Content("~/Static/Image/jp_bg02.png")">
                </p>
                <p class="jiepan_p" id="p2">
                    <img src="@Url.Content("~/Static/Image/jp_img.png")">
                </p>
            </li>
            <li class="niugu">
                <p>
                    <img src="@Url.Content("~/Static/Image/ng_bg.png")">
                </p>
                <p class="zixun_p" id="p3">
                    <img src="@Url.Content("~/Static/Image/ng_img.png")">
                </p>
            </li>
            <li class="peixun">
                <p>
                    <img src="@Url.Content("~/Static/Image/px_bg.png")">
                </p>
                <p class="jiepan_p" id="p4">
                    <img src="@Url.Content("~/Static/Image/px_img.png")">
                </p>
            </li>
        </ul>
    </div>
    <!--特权 end-->
</body>
</html>

<script type="text/javascript">

    $(function () {
        $(window).click(function () {
            window.location.href = "@Url.Action("KaiTong", "VipUser")?openid=@ViewBag.openId";
        });
    });

    window.onload = function () {
        var aLi = document.querySelectorAll('#scollBox li');
        var aPos = [];
        var aP = [
            document.getElementById('p1'),
            document.getElementById('p2'),
            document.getElementById('p3'),
            document.getElementById('p4')
        ];
        var apClass = [];

        for (var i = 0; i < aLi.length; i++) {
            var tmp = getPos(aLi[i]).y;
            aPos.push(tmp);
            apClass.push(aP[i].className);
        }
        var timer = null;
        window.addEventListener('scroll', function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                var num = 0;
                for (var i = 0; i < aPos.length; i++) {
                    if (t > aPos[i] - 250) { num = i; }
                }
                for (var i = 0; i < aP.length; i++) {
                    aP[i].className = (i == num) ? apClass[i] + ' ' + apClass[i] + '02' : apClass[i];
                }
            }, 50);
        }, false);
    };
    function getPos(obj) { var translateX = 0, top = 0; while (obj) { translateX += obj.offsettranslateX; top += obj.offsetTop; obj = obj.offsetParent; } return { x: translateX, y: top }; }
</script>
